<template>
	<view class="">
		<u-navbar :border-bottom="false" title="用户权益" back-icon-color="#ffffff" :background="{background:'#47443e'}" title-color="#ffffff"></u-navbar>
		<view class="inter_user">
			<view class="vip_box_bg">
				<view class="vip_top_head">
					<view style="display: inline-block;">
						<image :src="vip_src" mode="" style="width: 360rpx;height: 100rpx;" v-if="vipType == 'vip'"></image>
						<view class="titleptyh" v-else>{{vipType}}</view>
					</view>
					<!-- <u-image width="360rpx" height="100rpx" :src="vip_src"></u-image> -->
					<view class="head_img">
						<u-image width="70rpx" height="70rpx" :src="vip_head" shape="circle"></u-image>
					</view>
				</view>
				<view class="vip_body">
					<view class="v1_box">
						<view class="v1_tit">{{nickName}}</view>
						<view class="v1_type">{{userLevel}}</view>
					</view>
					<view class="v_time">
						未设置 
					</view>
				</view>
			</view>
			<view class="vip_menu_tree">
				<view class="vip_menu_row">
					<image src="../../static/vip_icon01.png" mode="widthFix"></image>
					<view>普通用户</view>
				</view>
				<view class="vip_menu_row">
					<image src="../../static/vip_icon02.png" mode="widthFix"></image>
					<view>会员用户</view>
				</view>
				<view class="vip_menu_row">
					<image src="../../static/vip_icon03.png" mode="widthFix"></image>
					<view>vip会员</view>
				</view>
			</view>
			<image src="../../static/vip_qy_bg.png" mode="widthFix" class="inter_vip_bg"></image>
		</view>
		<view class="vip_cont_body">
			<!-- <view class="vip_bg_cont"></view> -->
			<view class="vip_body_hyjs">
				<view class="row">
					<view class="tit">普通用户</view>
					<view class="cont">
						<view>享受10积分兑换1元权益</view>
						<view>提交客户可跟进升级成为会员用户</view>
					</view>
				</view>
				<view class="row">
					<view class="tit">会员用户</view>
					<view class="cont">
						<view>享受5积分兑换1元权益</view>
						<view>提交客户并成交升级成为VIP会员用户</view>
					</view>
				</view>
				<view class="row">
					<view class="tit">VIP会员</view>
					<view class="cont">
						<view>享受1积分兑换1元权益</view>
						<view>优先邀请参与平台活动</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var maxNum = 3, _self;
	import {
		mapState,
		mapMutations
	} from 'vuex';	
	export default {
		data() {
			return {
				vip_src:'/static/vipicon.png',
				vip_head:'/static/touxiang.png',
				nickName: '',
				realName: '',
				formname:'',
				telephone: '',
				address: '',
				remark: '',
				cover: '',
				integralCount: 0,
				userLevel: '',
				vipType: ''
			}
		},
		computed: {
			...mapState(['userInfo', 'hasLogin', 'loginProvider', 'openid'])
		},
		onShow() {
			this.getMember('');
		},
		onLoad(){
			_self = this;
			this.getMember('card');
		},
		methods: {
			getMember : function(t){
			    uni.request({
			    	url: this.serverUrl + 'app/getMember',
			    	header: {
			    		"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
			    	},
			    	method: 'POST',
			    	data: {
						id: this.userInfo.id,
			    	},
			    	success: (r) => {
						console.log(r.data.data)
			    		if (r.data.code==0) {
							if(t==''){
								this.vip_head=r.data.data.cover;
								this.nickName=r.data.data.nickName;
								// this.realName=r.data.data.realName;
								// this.telephone=r.data.data.telephone;
								// this.address=r.data.data.address;
								// this.remark=r.data.data.remark;
								// this.integralCount=r.data.data.integralCount;
								var ulevel = '';
								if(r.data.data.userLevel==null || r.data.data.userLevel==''){
									ulevel = '普通会员';
								}else if(r.data.data.userLevel=='M1'){
									ulevel = 'M1总监';
								}else{
									ulevel = r.data.data.userLevel+'经理';
								}
								this.userLevel=ulevel;
								var uVip = '';
								if(r.data.data.vipType=='1'){
									uVip = '普通用户';
								}else if(r.data.data.vipType=='2'){
									uVip = '会员用户';
								}else if(r.data.data.vipType=='3'){
									uVip = 'vip';
								}
								this.vipType= uVip;
								console.log(r.data.data.vipType,'vip')
							}else{
								// if(r.data.data.card!=null && r.data.data.card!=''){
								// 	this.uploadFilePath=r.data.data.card;
								// 	var cimgs = r.data.data.card.split(";");
								// 	_self.imgLists = _self.imgLists.concat(cimgs);
								// 	if (_self.imgLists.length >= maxNum){
								// 	    _self.canAdd = false;
								// 	}
									
								// }
							}
							
						}
					}
				})
			},
		}
	}
</script>

<style lang="less">
.inter_user{
	height: 520rpx;
	background-color: #47443e;
	position: relative;
	box-sizing: border-box;
	padding-top: 30rpx;
	.inter_vip_bg{
		position: absolute;
		width: 100%;
		bottom: 0px;
		left: 0px;
	}
	.vip_box_bg{
		width: 90%;
		height: 390rpx;
		background-image: linear-gradient(90deg, 
			#fef1c6 0%, 
			#f2d9a1 100%), 
		linear-gradient(
			#ffeaa2, 
			#ffeaa2);
		background-blend-mode: normal, 
			normal;
		box-shadow: inset -1rpx 2rpx 5rpx 0px 
			rgba(255, 255, 255, 0.79);
		border-radius: 21rpx;
		margin: 0 auto;
		padding-top: 35rpx;
		box-sizing: border-box;
		.vip_top_head{
			border-bottom: 1rpx solid #d8c07f;
			padding: 0rpx 30rpx 10rpx 25rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			.head_img{
				border-radius: 50%;
			}
		}
		.vip_body{
			display: flex;
			justify-content: space-between;
			padding: 15rpx 30rpx 0rpx 25rpx;
			.v1_box{
				.v1_tit{
					font-size: 36rpx;
					color: #635f58;
					margin-bottom: 10rpx;
				} 
				.v1_type{
					font-size: 24rpx;
					color: #7a7771;
				}
			}
			.v_time{
				font-size: 24rpx;
				color: #8b7d5c;
			}
		}
	}
	.vip_menu_tree{
		width: 100%;
		padding: 0rpx 90rpx 20rpx 90rpx; 
		box-sizing: border-box;
		display: flex;
		position: absolute;
		z-index: 1;
		bottom: 0rpx;
		align-items: center;
		justify-content: center;
		.vip_menu_row{
			width: 100rpx;
			margin: 0rpx 45rpx;
			text-align: center;
			image{
				width: 90%;
			}
			view{
				width: 100%;
				font-size: 24rpx;
				color: #fef1c6;
				padding-top: 10rpx;
			}
		}
	}
}
.vip_cont_body{
	min-height: 840rpx;
	margin: 30rpx;
	position: relative;
	.vip_body_hyjs{
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		z-index: 1;
		padding: 35rpx 35rpx;
		width: 100%;
		box-sizing: border-box;
		background: url(../../static/vip_cont_bg.png)no-repeat center;
		background-size: 100% 100%;
		.row{
			margin-bottom: 30rpx;
			&:last-child{
				margin-bottom: 0rpx;
			}
		}
		.tit{
			font-size: 30rpx;
			color: #e1c178;
			margin-bottom: 25rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			&::after{
				content: "";
				display: inline-block;
				width: 130rpx;
				height: 60rpx;
				background: url(../../static/vip_bt_rt.png) no-repeat center;
				background-size:100% ;
				margin-left: 10rpx;
			}
			&::before{
				content: "";
				display: inline-block;
				width: 130rpx;
				height: 60rpx;
				background: url(../../static/vip_bt_left.png) no-repeat center;
				background-size:100% ;
				margin-right: 10rpx;
			}
		}
		.cont{
			font-size: 30rpx;
			color: #54524c;
			view{
				margin-bottom: 25rpx;
				display: flex;
				align-items: center;
				&::before{
					content: "";
					display: inline-block;
					width: 10rpx;
					height: 10rpx;
					background: #54524c;
					border-radius: 50%;
					margin-right: 15rpx;
				}
			}
		}
	}
}
.titleptyh{
	width: 360rpx;
	height: 70rpx;
	color: #8b7d5c;
	display: flex;
	align-items: center;
}
</style>
